<template>
  <div class="app-container">
    <div class="bg-blue-100">
      <div class="px-24 py-16 text-white flex justify-between aling-center items-center">
        <div class="w-40 flex justify-start">
          <router-link to="/sale/walmart/walmartWFS/shipments"><i class="el-icon-back larger-icon"></i></router-link>
        </div>
        <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-white"
          data-testid="page-title">
          <span class="w_DY w_Da w_De text-white">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">发送库存</font>
            </font>
          </span>
        </p>
        <div class="w-40 flex justify-end">
          <i class="el-icon-close larger-icon" @click="iconClose"></i>
        </div>
      </div>
    </div>
    <div class="flex-grow overflow-y-auto" style="padding-bottom: 112px">
      <div class="mx-auto" style="max-width: 1440px">
        <div class="mt-24 mb-24 text-center">
          <span class="w_DY w_Db w_De text-24 leading-9">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">创建入库订单</font>
            </font>
          </span>
          <p class="w_DY w_Dc w_Dd">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">请告诉我们您将向 WFS 设施发送多少物品和单位。</font>
            </font>
          </p>
        </div>
        <div class="w_DY w_Db w_Dd">
          <div class="w_h overflow-visible flex">
            <div class="w_DY w_Db w_Dd p-12" style="width: 348px; border-right: 1px solid rgb(227, 227, 227)">
              <p class="w_DY w_Da w_De">
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">入库订单 ID
                  </font>
                </font>
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">：</font>
                </font>
              </p>
              <div class="flex flex-row items-center gap-4">
                <p class="w_DY w_Dc w_Dd" data-testid="inbound-order-id">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">{{ inboundOrderId }}</font>
                  </font>
                </p>
              </div>
              <div class="w_EL w_EU mt-8" analytics="[object Object]">
                <label class="w_HB w_EM" for="react-aria8602069028-:r5:"><span class="w_Dq w_Dt w_HD">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">预计交货日期*</font>
                    </font>
                  </span></label>
                <div class="w_EN">
                  <el-date-picker v-model="expectedDeliveryDate" type="date" placeholder="年/月/日" class="w_ER">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div class="w_DY w_Db w_Dd p-12">
              <p class="w_DY w_Da w_De">
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">发货自</font>
                </font>
              </p>
              <p class="w_DY w_Dc w_Dd">
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">我们将选择距离该地址最近的 WFS
                    设施。我们也将在这里退回无法送达的货件。</font>
                </font>
              </p>
              <div class="w_DY w_Db w_Dd mt-16">
                <div class="flex justify-items-start items-center">
                  <div class="w_DY w_Db w_Dd flex flex-row">
                    <div class="w_DY w_Db w_Dd flex flex-col">
                      <p class="w_DY w_Db w_De text-12 leading-4 mb-4">
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit">地址*</font>
                        </font>
                      </p>
                      <span class="w_Bz">
                        <div data-testid="address-dropdown" aria-controls="react-aria8602069028-:rb:"
                          aria-expanded="false">
                          <div class="w_EL w_EU" style="width: 648px; margin-top: -5px">
                            <label class="w_HB w_EM" for="react-aria8602069028-:rc:"><span
                                class="w_Dq w_Dt w_HD"></span></label>
                            <div class="w_EN">
                              <el-input v-model="inputAddress" placeholder="请选择地址" readonly @focus="showDropdown"
                                @blur="handleBlur" ref="addressInput">
                              </el-input>
                            </div>
                            <div class="w_Fu" style="transform: translate3d(0px, 40px, 0px)">
                              <div class="w_Gs" v-if="addressFlay" ref="dropdown">
                                <div class="w_G2">
                                  <div style="width: 648px; margin: -1rem">
                                    <el-input placeholder="搜索" v-model="addressInput" class="input-with-select"
                                      @blur="handleBlur" @input="handleAddressChange">
                                    </el-input>
                                    <el-table :data="addressList" :max-height="240" class="clickable">
                                      <el-table-column label="地址" width="480px">
                                        <template slot-scope="scope">
                                          <span @click="handleAddress(scope.row)">{{
                                            scope.row.addressNickname
                                            }}&nbsp;&nbsp;|</span>
                                          <span @click="handleAddress(scope.row)">&nbsp;&nbsp;{{
                                            scope.row.firstName
                                            }}</span>
                                          <span @click="handleAddress(scope.row)">&nbsp;&nbsp;{{
                                            scope.row.lastName
                                            }}&nbsp;&nbsp;|</span>
                                          <span @click="handleAddress(scope.row)"
                                            v-if="scope.row.companyName != null">&nbsp;&nbsp;{{
                                              scope.row.companyName
                                            }}&nbsp;&nbsp;|</span>
                                          <span @click="handleAddress(scope.row)">&nbsp;&nbsp;{{
                                            scope.row.phone
                                            }}&nbsp;&nbsp;|</span>
                                          <span @click="handleAddress(scope.row)" v-if="
                                            scope.row.addressLine1 != null
                                          ">&nbsp;&nbsp;{{
                                            scope.row.addressLine1
                                            }}，</span>
                                          <span @click="handleAddress(scope.row)" v-if="
                                            scope.row.addressLine2 != null
                                          ">&nbsp;&nbsp;{{
                                            scope.row.addressLine2
                                            }}，</span>
                                          <span @click="handleAddress(scope.row)">{{ scope.row.city }}，</span>
                                          <span @click="handleAddress(scope.row)">OR，</span>
                                          <span @click="handleAddress(scope.row)">{{ scope.row.zipCode }}</span>
                                        </template>
                                      </el-table-column>
                                      <el-table-column align="center">
                                        <template slot-scope="scope">
                                          <el-button size="mini" type="text"
                                            @click="editAddress(scope.row)">编辑</el-button>
                                        </template>
                                      </el-table-column>
                                    </el-table>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div id="react-aria8602069028-:rb:"></div>
                      </span>
                    </div>
                    <div class="w_DY w_Db w_Dd flex items-center justify-items-center pt-16">
                      <button
                        class="Button-module_button__PM45p Button-module_tertiary__WZEbY Button-module_small__UMN3W ml-32 p-0"
                        type="button" data-testid="add-address">
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit"><el-link target="_blank"
                              @click="addToAddress()">添加新地址</el-link></font>
                        </font>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w_h mt-24 p-12 p-24" style="overflow: initial">
            <h1 class="w_D6 w_D8 w_EB">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">发送库存</font>
              </font>
            </h1>
            <div class="w_T mt-16">
              <label class="Radio-module_label__Znh-K Radio-module_checked__uiAXA" for="ld_radio_18"
                v-if="1 == 2"><input class="Radio-module_input__9rDt5" id="ld_radio_18" type="radio"
                  data-testid="mode-search-and-select" value="search-and-select" checked="" /><span
                  class="Radio-module_dot__2rSBc"><span class="Radio-module_dotFill__euhz2"></span></span>
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">搜索项目</font>
                </font>
              </label><label class="Radio-module_label__Znh-K" for="ld_radio_19" v-if="1 == 2"><input
                  class="Radio-module_input__9rDt5" id="ld_radio_19" type="radio" data-testid="mode-upload-in-bulk"
                  value="upload-in-bulk" /><span class="Radio-module_dot__2rSBc"><span
                    class="Radio-module_dotFill__euhz2"></span></span>
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">上传</font>
                </font>
              </label>
              <span style="color:red">*</span>
              <el-input v-model="inputStockNumber" placeholder="备货计划" readonly style="width:20%;margin:0px">
              </el-input>
              <el-col :span="5">
                <el-button round @click="handleDepotStock">选择备货计划</el-button>
              </el-col>
            </div>
            <div class="w_DY w_Db w_Dd flex mt-24 justify-between items-center">
              <el-input placeholder="Search" v-model="input" @input="itemsQuery" class="input-with-selects"
                @blur="handleItemsBlur" ref="itemsInput">
                <el-select v-model="select" slot="prepend" placeholder="请选择" class="select-input"
                  @change="hideSearch()">
                  <el-option label="SKU" value="2"></el-option>
                  <el-option label="item name" value="1"></el-option>
                  <el-option label="UPC" value="3"></el-option>
                  <el-option label="GTIN" value="4"></el-option>
                  <el-option label="EAN" value="5"></el-option>
                  <el-option label="Item ID" value="6"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="itemsQuery"></el-button>
              </el-input>
              <el-button type="primary" plain style="margin-right: 166px">推荐商品</el-button>
              <div class="w_DY w_Db w_Dd flex" style="margin-top: -10px">
                <div class="w_DY w_Db w_Dd mr-32">
                  <p class="w_DY w_Db w_Dd text-14 text-gray-100">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">总项目</font>
                    </font>
                  </p>
                  <h1 class="w_D6 w_D8 w_EB text-24">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">{{
                        this.totalOrder
                        }}</font>
                    </font>
                  </h1>
                </div>
                <div class="w_DY w_Db w_Dd">
                  <p class="w_DY w_Db w_Dd text-14 text-gray-100">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">总单位数</font>
                    </font>
                  </p>
                  <h1 class="w_D6 w_D8 w_EB text-24">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">{{
                        this.totalMasterCases
                        }}</font>
                    </font>
                  </h1>
                </div>
              </div>
            </div>

            <div class="w_Fu" style="
                transform: translate3d(-16px, 40px, 0px);
                margin-top: 472px;
                margin-left: 304px;
              " v-if="showContent">
              <div class="w_Gs" ref="searchdown">
                <div class="w_G2">
                  <div style="width: 730px; margin: -1rem">
                    <div class="w_DY w_Db w_Dd p-16">
                      <p class="w_DY w_Db w_Dd">
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit">{{ this.total }} 个</font>
                        </font>
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit">结果</font>
                        </font>
                      </p>
                    </div>

                    <el-table :data="itemsList" :max-height="240">
                      <el-table-column label="Item name" width="320px">
                        <template slot-scope="scope">
                          <span>{{ scope.row.productName.slice(0, 39)
                          }}<span v-if="scope.row.productName.length > 39">...</span></span>
                        </template></el-table-column>
                      <el-table-column label="GTIN" prop="gtin" width="150px"></el-table-column>
                      <el-table-column label="SKU" prop="sku" width="160px"></el-table-column>
                      <el-table-column label="Action">
                        <template slot-scope="scope">
                          <el-button size="mini" type="text" @click="handleRequest(scope.row)"
                            v-if="isInOrder(scope.row) == false">Add to order</el-button>
                          <dict-tag v-else :options="dict.type.add_to_order" value="added" />
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageNum"
                      :limit.sync="queryParam.pageSize" @pagination="getItemsList()" />
                  </div>
                </div>
              </div>
            </div>

            <br />
            <div>
              <el-table :data="addToOrder">
                <el-table-column label="Item name" width="400px">
                  <template slot-scope="scope">
                    <span>{{ scope.row.productName.slice(0, 39)
                    }}<span v-if="scope.row.productName.length > 39">...</span></span>
                    <br />
                    <span>GTIN：{{ scope.row.gtin }}</span>
                    <br />
                    <span>Seller SKU：{{ scope.row.sku }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="Available" prop="availToSellQty"></el-table-column>
                <el-table-column label="Total units">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.totalUnits" @input="handleInput(scope.row, $event)"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="Master case setup">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.masterCaseSetup" filterable placeholder="选择"
                      @change="handMaster(scope.row)">
                      <el-option v-for="setup in masterSetup" :key="setup.value" :label="setup.label"
                        :value="setup.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="Units per master case">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.masterCase" :disabled="scope.row.masterFlay"
                      @input="handleCase(scope.row, $event)"></el-input>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-printer"
                      @click="handleInventoryPrint(scope.row)"></el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                      @click="handleAddressDel(scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fixed inset-x-0 bottom-0 bg-white" style="z-index: 0" v-loading="loading">
      <div class="p-24">
        <div class="w_T flex justify-end">
          <el-button plain>取消</el-button>
          <el-button type="primary" plain @click="handleCreate">创建</el-button>
        </div>
      </div>
    </div>

    <el-dialog width="38%" :title="addressTitle" :visible.sync="addressDetails" append-to-body>
      <p>我们会将无法投递的货件退回至该地址。<br /></p>

      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-row>
          <el-col :span="11">
            <div style="margin-bottom: 8px">名*</div>
            <el-form-item prop="firstName" label-width="0px">
              <el-input v-model="form.firstName" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="margin-left: 50px">
            <div style="margin-bottom: 8px">姓*</div>
            <el-form-item prop="lastName" label-width="0px">
              <el-input v-model="form.lastName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <div style="margin-bottom: 8px">地址昵称</div>
            <el-form-item prop="addressNickname" label-width="0px">
              <el-input v-model="form.addressNickname" style="width: 680px" />
              <span>昵称仅供您使用，其他人看不到</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <div style="margin-bottom: 8px">公司名称</div>
            <el-form-item prop="companyName" label-width="0px">
              <el-input v-model="form.companyName" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="margin-left: 50px">
            <div style="margin-bottom: 8px">电话*</div>
            <el-form-item prop="phone" label-width="0px">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="border-bottom: 1px solid #ccc; margin-top: 20px"></div>
        <el-row>
          <el-col :span="22" style="margin-top: 30px">
            <div style="margin-bottom: 8px">地址行1*</div>
            <el-form-item prop="addressLine1" label-width="0px">
              <el-input v-model="form.addressLine1" style="width: 680px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <div style="margin-bottom: 8px">地址行2</div>
            <el-form-item prop="addressLine2" label-width="0px">
              <el-input v-model="form.addressLine2" style="width: 680px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <div style="margin-bottom: 8px">国家*</div>
            <el-form-item prop="country" label-width="0px">
              <el-input v-model="form.country" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="margin-left: 50px">
            <div style="margin-bottom: 8px">州*</div>
            <el-form-item prop="stateCode" label-width="0px">
              <el-select v-model="form.stateCode" filterable placeholder="请选择" style="width: 314px">
                <el-option v-for="item in optionState" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <div style="margin-bottom: 8px">城市*</div>
            <el-form-item prop="city" label-width="0px">
              <el-input v-model="form.city" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="margin-left: 50px">
            <div style="margin-bottom: 8px">邮政编码*</div>
            <el-form-item prop="zipCode" label-width="0px">
              <el-input v-model="form.zipCode" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="isSubmitting">{{ isEdit ? '保存' : '添加' }}</el-button>
      </div>
    </el-dialog>

    <!-- 选择仓库备货 -->
    <el-dialog :title="titleDepotStock" :visible.sync="openDepotStock" width="1400px" append-to-body
      :close-on-click-modal="false">
      <el-table v-loading="loading" :data="stockList" style="width: 100%; overflow-x: auto;"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="10" align="center" />
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.planList" style="width: 100%"
              v-if="scope.row.planList && scope.row.planList.length > 0">
              <el-table-column type="expand">
                <template slot-scope="subScope">
                  <el-table :data="subScope.row.shipmentsProductList" style="width: 100%"
                    v-if="subScope.row.shipmentsProductList && subScope.row.shipmentsProductList.length > 0">
                    <el-table-column label="图片" align="center" prop="imgName">
                      <template slot-scope="scope">
                        <div class="image-container">
                          <image-preview v-for="(image, index) in scope.row.imgName" :key="index" :src="image"
                            :width="50" :height="50" class="image-item" />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="品名" align="center" prop="name">
                      <template slot-scope="productScope">
                        {{ productScope.row.name || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="SKU" align="center" prop="sku">
                      <template slot-scope="productScope">
                        {{ productScope.row.sku || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="价格(￥)" align="center" prop="price">
                      <template slot-scope="productScope">
                        {{ productScope.row.price || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="已发数量" align="center" prop="sentSize">
                      <template slot-scope="productScope">
                        {{ productScope.row.sentSize || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="未发数量" align="center" prop="operSize">
                      <template slot-scope="productScope">
                        {{ productScope.row.operSize || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="计划数量" align="center" prop="planSize">
                      <template slot-scope="productScope">
                        {{ productScope.row.planSize || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="发货数量" align="center" prop="planCount">
                      <template slot-scope="productScope">
                        {{ productScope.row.planCount || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="金额(￥)" align="center" prop="amount">
                      <template slot-scope="productScope">
                        {{ productScope.row.amount || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center" prop="productRemarks">
                      <template slot-scope="productScope">
                        {{ productScope.row.productRemarks || '-' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="计划编号" align="center" prop="planNumber">
                <template slot-scope="planScope">
                  {{ planScope.row.planNumber || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="计划名称" align="center" prop="planName">
                <template slot-scope="planScope">
                  {{ planScope.row.planName || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="发货日期" align="center" prop="shipTime">
                <template slot-scope="planScope">
                  {{ planScope.row.shipTime || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="发往店铺" align="center" prop="shopName">
                <template slot-scope="planScope">
                  {{ planScope.row.shopName || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="货运方式" align="center" prop="mannerName">
                <template slot-scope="planScope">
                  {{ planScope.row.mannerName || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="制单人" align="center" prop="createBy">
                <template slot-scope="planScope">
                  {{ planScope.row.createBy || '-' }}
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="备货编号" align="center" prop="stockNumber" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.stockNumber || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="发货方式" align="center" prop="mannerName" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.mannerName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="发货日期" align="center" prop="shipmentDate" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.shipmentDate || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="发货数" align="center" min-width="55">
        <template slot-scope="scope">
          {{ totalSentSizeForRow[scope.$index] }}
        </template>
      </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="stockTotal > 0" :total="stockTotal" :page.sync="depotStockParams.pageNum"
        :limit.sync="depotStockParams.pageSize" @pagination="getStockList" />
      <!-- 底部按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="openCancel">取消</el-button>
        <el-button type="primary" @click="openConfirmSelection">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInventoryList } from "@/api/walmart/inventory";
import { listPlan as stockListPlan, bingShipmentStock } from "@/api/sale/stockPlan";
import { getInfo } from "@/api/walmart/auth";
import {
  addShipmentAddress,
  updateShipmentAddress,
  getShipmentStateTree,
  getSelectAddress,
  getShipmentInbound,
} from "@/api/walmart/shipment";
export default {
  dicts: ["add_to_order"],
  data() {
    return {
      loading: false,
      showContent: false, // 控制内容显示与隐藏的变量
      addressDetails: false,
      addressTitle: "",
      total: 0,
      orderPrefix: '',
      expectedDeliveryDate: null,
      input: "",
      inputAddress: "",
      select: "2",
      itemsList: [],
      addToOrder: [],
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        sku: null,
        productName: null,
        gtin: null,
        upc: null,
        itemId: null,
        authId: null,
        stockId: null,
        skuSet: [],
      },
      isEdit: false, // 用来标志是否是编辑模式
      isSubmitting: false, // 是否正在提交，控制按钮禁用
      form: {
        addId: null,
        firstName: '',
        lastName: '',
        addressNickname: '',
        companyName: '',
        phone: '',
        addressLine1: '',
        addressLine2: '',
        country: 'United States',
        stateCode: '',
        city: '',
        zipCode: ''
      },
      optionState: [],
      addressList: [],
      addressFlay: false,
      addressInput: "",
      masterSetup: [
        {
          value: "1",
          label: "盒装",
        },
        {
          value: "2",
          label: "个人",
        },
      ],
      masterFlay: true,
      totalOrder: 0,
      totalMasterCases: 0,
      inputValues: [],
      address: {},
      addressQuery: {
        queryParam: ''
      },
      counter: 1,  // 计数器
      inboundOrderId: "",  // 存储生成的 inboundOrderId
      openDepotStock: false,
      titleDepotStock: '',
      depotStockParams: {
        status: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //仓库备货所有数据
      stockList: [],
      selectedRows: [],// 用于存储选中的行数据
      inputStockNumber: "",
      stockTotal: 0,
      shipmentStockParam: {},
    };
  },
  mounted() {
    const itemsData = localStorage.getItem("itemsData");
    const rowData = JSON.parse(itemsData);
    this.queryParam.authId = rowData;
    this.getAuthInfo();
  },
  created() {
    this.getShipmentStateTree();
    this.rules = {
      firstName: [
        {
          required: true,
          validator: this.validateField("请输入名"),
          trigger: "blur",
        },
      ],
      lastName: [
        {
          required: true,
          validator: this.validateField("请输入姓"),
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          validator: this.validateField("请输入电话"),
          trigger: "blur",
        },
      ],
      addressLine1: [
        {
          required: true,
          validator: this.validateField("地址行1*"),
          trigger: "blur",
        },
      ],
      country: [
        {
          required: true,
          validator: this.validateField("请选择国家"),
          trigger: "change",
        },
      ],
      stateCode: [
        {
          required: true,
          validator: this.validateField("请选择州"),
          trigger: "change",
        },
      ],
      city: [
        {
          required: true,
          validator: this.validateField("请输入城市"),
          trigger: "blur",
        },
      ],
      zipCode: [
        {
          required: true,
          validator: this.validateField("请输入邮政编码"),
          trigger: "blur",
        },
      ],
    };

  },
  watch: {
    // 监听 input 变化
    input(newValue) {
      // 当输入框内容为空时，将 showContent 设置为 false，否则设置为 true
      this.showContent = newValue.trim() !== "";
    },
  },
  computed: {
    totalSentSizeForRow() {
      const result = this.stockList.map((stockItem, index) => {
        const stockSentSize = stockItem.planList.reduce((innerSum, planItem) => {
          const shipmentsSum = planItem.shipmentsProductList.reduce((shipSum, shipment) => {
            return shipSum + (shipment.planCount || 0);
          }, 0);
          return innerSum + shipmentsSum;
        }, 0);
        return stockSentSize;
      });
      return result;
    }
  },
  methods: {
    /** 查询店铺名称列表 */
    getAuthInfo() {
      getInfo(this.queryParam.authId).then((response) => {
        this.orderPrefix = (response.data.shopName).substring(0, 3);
        this.generateOrderId();
      });
    },
    //关闭页面但不刷新
    iconClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace({
        path: "/sale/walmart/walmartWFS/shipments",
      }); // 关闭之后要返回的页面
    },
    /** 商品搜索 */
    itemsQuery() {
      if (this.select == "1") {
        this.queryParam.productName = this.input;
        this.getItemsList();
        this.queryParam.productName = null;
      } else if (this.select == "2") {
        this.queryParam.sku = this.input;
        this.getItemsList();
        this.queryParam.sku = null;
      } else if (this.select == "3") {
        this.queryParam.upc = this.input;
        this.getItemsList();
        this.queryParam.upc = null;
      } else if (this.select == "4") {
        this.queryParam.gtin = this.input;
        this.getItemsList();
        this.queryParam.gtin = null;
      } else if (this.select == "5") {
        this.queryParam.itemId = this.input;
        this.getItemsList();
        this.queryParam.itemId = null;
      }
    },
    /** 条件查询所以商品 */
    getItemsList() {
      this.loading = true;
      getInventoryList(this.queryParam).then((response) => {
        this.loading = false;
        this.itemsList = response.rows;
        this.total = response.total;
      });
    },
    //点击商品事件
    handleRequest(row) {
      row.expectedDeliveryDate = this.expectedDeliveryDate;
      this.addToOrder.push(row);
      this.totalOrder = this.addToOrder.length;
    },
    //校验是否可以添加按钮
    isInOrder(row) {
      return this.addToOrder.some((item) => item.sku === row.sku);
    },
    // 用于编辑时加载地址数据
    editAddress(address) {
      this.isEdit = true;
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.addressTitle = "编辑地址";
      this.form = { ...address }; // 用已有地址填充表单数据
      this.addressDetails = true;
    },
    //添加新地址按钮
    addToAddress() {
      this.isEdit = false;
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.reset();
      this.addressTitle = "添加新地址";
      this.addressDetails = true;
    },
    /** 添加地址 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.addId == null) {
            addShipmentAddress(this.form).then((response) => {
              this.addressFlay = true;
              this.getAddressList();
              this.$modal.msgSuccess("添加地址成功！");
              this.addressDetails = false;
              this.reset();
            }).finally(() => {
              this.inputAddress = "";
              this.isSubmitting = false; // 操作完成，启用按钮
            });
          } else {
            updateShipmentAddress(this.form).then((response) => {
              this.addressFlay = true;
              this.getAddressList();
              this.$modal.msgSuccess("修改地址成功！");
              this.addressDetails = false;
              this.reset();
            }).finally(() => {
              this.inputAddress = "";
              this.isSubmitting = false; // 操作完成，启用按钮
            });
          }
        }
      });
    },
    //获取发货州地址
    getShipmentStateTree() {
      getShipmentStateTree(null).then((response) => {
        this.optionState = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.addressDetails = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        addId: null,
        firstName: null,
        lastName: null,
        addressNickname: null,
        companyName: null,
        phone: null,
        addressLine1: null,
        addressLine2: null,
        country: "United States",
        state: null,
        city: null,
        zipCode: null,
      };
    },
    //显示所有地址
    getAddressList() {
      getSelectAddress(this.addressQuery).then((response) => {
        this.addressList = response.data;
      });
    },
    showDropdown() {
      this.addressFlay = true; // 显示下拉框
      this.getAddressList();
    },
    handleBlur(event) {
      if (
        this.$refs.addressInput && this.$refs.addressInput.$el.contains(event.relatedTarget) ||  // 焦点移到输入框内部
        this.$refs.dropdown && this.$refs.dropdown.contains(event.relatedTarget)  // 焦点移到下拉框内部
      ) {
        return; // 如果焦点移到输入框或下拉框内部，阻止隐藏
      }
      this.hideDropdown(); // 否则隐藏下拉框
    },
    handleItemsBlur(event) {
      if (
        this.$refs.itemsInput && this.$refs.itemsInput.$el.contains(event.relatedTarget)
      ) {
        return; // 如果焦点移到输入框或下拉框内部，阻止隐藏
      }
      setTimeout(() => {
        this.hideSearch();
      }, 200);
    },
    hideSearch() {
      this.showContent = false;
      this.input = '';
    },
    hideDropdown() {
      setTimeout(() => {
        this.addressFlay = false; // 显示下拉框  // 延时隐藏，确保 blur 事件不会立即触发
      }, 300);  // 延时 200ms
    },
    handleAddressChange(value) {
      this.addressQuery.queryParam = value;
      this.getAddressList();
    },
    //点击地址触发事件
    handleAddress(data) {
      this.inputAddress = "";
      this.address = data;
      let addressPart =
        data.addressNickname +
        " | " +
        data.firstName +
        " " +
        data.lastName +
        " | ";
      // 检查 companyName 是否为 null
      if (data.companyName != null) {
        addressPart += data.companyName + " | ";
      }
      addressPart += data.phone = " | " + data.addressLine1;
      // 检查 addressLine1 是否为 null
      if (data.addressLine2 != null) {
        addressPart += " | " + data.addressLine1;
      }
      addressPart += "，" + data.city + "，" + data.stateCode + "，" + data.zipCode;
      this.inputAddress = addressPart.trim();
      data.addressFlay = false;
      this.addressFlay = false;
    },
    //包装设置
    handMaster(data) {
      if (data.masterCaseSetup == 2) {
        this.$set(data, "masterCase", 1);
        data.masterFlay = true;
      } else {
        this.$set(data, "masterCase", null);
        data.masterFlay = false;
      }
    },
    //汇总总项目，总单位数
    handleInput(row, event) {
      if (row.masterFlay == true) {
        row.totalUnits = parseFloat(event) || 0;
        this.calculateTotalSum();
      } else {
        this.updateInputValues(row);
      }
    },
    calculateTotalSum() {
      this.totalMasterCases = this.addToOrder.reduce((sum, row) => {
        return sum + (parseFloat(row.totalUnits) || 0);
      }, 0);
    },
    handleCase(row, event) {
      // Math.ceil(row.totalUnits / row.masterCase);
      if (row.masterFlay == false) {
        row.masterCase = parseFloat(event) || 0;
        this.updateInputValues(row);
      }
    },
    // 更新输入值数组
    updateInputValues(row) {
      if (Math.ceil(row.totalUnits / row.masterCase) == "Infinity") {
      } else {
        this.totalMasterCases = this.addToOrder.reduce((sum, row) => {
          return (
            sum +
            Math.ceil(
              parseFloat(row.totalUnits) / parseFloat(row.masterCase) || 0
            )
          );
        }, 0);
      }
    },
    handleAddressDel(data) {
      // 遍历 addToOrder 数组
      for (let i = 0; i < this.addToOrder.length; i++) {
        const row = this.addToOrder[i];
        // 如果找到与 scope.row 相同的数据项
        if (row === data) {
          // 从数组中删除该项
          this.addToOrder.splice(i, 1);
          break; // 停止循环
        }
      }
      this.totalOrder = this.addToOrder.length;
    },
    //创建入库订单
    handleCreate() {
      this.address.orderItemsList = this.addToOrder;
      this.address.authId = this.queryParam.authId;
      this.address.inboundOrderId = this.inboundOrderId;
      this.address.stockId = this.queryParam.stockId;

      if (!this.inputStockNumber) {
        this.$message.error("请选择备货计划");
        return;
      }
      if (!this.expectedDeliveryDate) {
        this.$message.error("请选择预计交货日期");
        return;
      }
      if (!this.inputAddress) {
        this.$message.error("请选择预计交货日期");
        return;
      }
      if (this.addToOrder.length <= 0) {
        this.$message.error("请选择商品");
        return;
      }
      this.loading = true;
      getShipmentInbound(this.address).then((response) => {
        this.$modal.msgSuccess("发送库存成功！");
        this.loading = false;
        const shipmentIds = response.data;    // 这就是后端返回的 string[] 数组
        if (!Array.isArray(shipmentIds) || shipmentIds.length === 0) {
          this.$message.error("没有获取到任何 shipmentId");
          return;
        }
        const promises = shipmentIds.map(id => {
          const param = {
            shipmentId: id,
            authId: this.queryParam.authId,
            stockId: this.queryParam.stockId
          };
          return bingShipmentStock(param);
        });
        this.returnView();
      });
    },
    returnView() {
      this.$store.dispatch("tagsView/delView", this.$route);
      // 使用 push 跳转到目标页面并传递查询参数
      this.$router.push({
        path: "/sale/walmart/walmartWFS/shipments",
        query: { page: 1, }
      });
    },
    //校验不能为空
    validateField(message) {
      return (rule, value, callback) => {
        if (!value) {
          callback(new Error(message));
        } else {
          callback();
        }
      };
    },
    //生成唯一的入库订单ID
    generateOrderId() {
      const timestamp = Date.now();  // 获取当前时间戳
      //const orderId = `PEC-${timestamp}${String(this.counter).padStart(4, '0')}`;  // 生成ID
      const orderId = `${this.orderPrefix}-${timestamp}`;  // 生成ID
      this.inboundOrderId = orderId;  // 存储生成的ID
      this.counter++;  // 递增计数器
    },
    //点击选择备货计划
    handleDepotStock() {
      this.titleDepotStock = "选择备货计划";
      this.openDepotStock = true;
      this.getStockList();
    },
    //备货计划列表
    getStockList() {
      this.depotStockParams.shipmentId = 111;//查询不为空的数据
      this.depotStockParams.authId = this.queryParam.authId;
      stockListPlan(this.depotStockParams).then((response) => {
        this.stockList = response.rows;
        this.stockTotal = response.total;
      });
    },
    //选择备货取消按钮
    openCancel() {
      this.openDepotStock = false;
    },
    //选择备货确定按钮
    async openConfirmSelection() {
      if (this.selectedRows.length > 1) {
        this.$message.error("请选择单个备货计划");
        return;
      }
      if (this.selectedRows.length <= 0) {
        this.$message.error("请选择备货计划");
        return;
      }

      const missingFreight = this.selectedRows[0].planList
        .flatMap(plan => plan.shipmentsProductList)
        .some(product => !product.freight || Number(product.freight) === 0);
      if (missingFreight) {
        //this.$message.error("存在未导入运费的商品，请先补充运费");
        //return;
      }
      
      if (this.selectedRows.length == 1) {
        this.queryParam.stockId = this.selectedRows[0].stockId;
        this.inputStockNumber = this.selectedRows[0].stockNumber;
        console.info(this.selectedRows[0].planList[0].shipmentsProductList);
        const skuSet = new Set(
          this.selectedRows[0].planList
            .flatMap(plan => plan.shipmentsProductList)
            .flatMap(product => [product.sku, product.itemSku])
            .filter(Boolean) // 过滤掉 null 和 undefined
        );
        this.queryParam.skuSet = Array.from(skuSet);
        await this.batchQueryBySkuSet(this.queryParam.skuSet);
      }
      this.openDepotStock = false;
    },
    //根据 SKU 批量查询商品信息
    async batchQueryBySkuSet(skuSet) {
      //缺少成本productCost和头程firstLeg，需要重新查询再赋值到addToOrder里面，后端需要字段sku，productCost，firstLeg
      this.addToOrder = [];
      const addedSkus = new Set(this.addToOrder.map(item => item.sku));
      for (const sku of skuSet) {
        const param = { ...this.queryParam, sku };
        const res = await getInventoryList(param);
        const rows = res.rows || [];
        if (rows.length > 0) {
          const row = rows[0]; // 假设返回的是唯一 SKU 对应商品
          if (!addedSkus.has(row.sku)) {
            row.expectedDeliveryDate = this.expectedDeliveryDate; // 附加字段
            this.handleRequest(row);
            addedSkus.add(row.sku);
          }
        }
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    /** 跳转到打印页面 */
    handleInventoryPrint(row) {
      sessionStorage.setItem('printData', JSON.stringify(row));
      this.$router.push("/print/printPage");
    },
  },
};
</script>

<style>
.el-dialog__body {
  padding: 5px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.larger-icon {
  font-size: 24px;
}

.select-input {
  width: 160px;
}

.input-with-selects {
  width: 950px;
}

.bg-blue-100,
.bg-blue-110 {
  --tw-bg-opacity: 1 !important;
}

.bg-blue-100 {
  background-color: rgba(0, 113, 220, var(--tw-bg-opacity)) !important;
}

.text-white {
  color: #fff !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.justify-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.w-40 {
  width: 40px !important;
}

.justify-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.Body-module_weight400__4Oy12 {
  font-weight: 400;
}

.Body-module_body1__B5yP7 {
  font-size: 16px;
  line-height: 24px;
}

.Body-module_body__eiCkB {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.w_De {
  font-weight: 700;
}

.w_Da,
.w_Db {
  line-height: 1.5rem;
}

.w_Da {
  font-size: 1.125rem;
}

.w_DY {
  color: #2e2f32;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.flex-grow {
  -webkit-box-flex: 1 !important;
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.text-center {
  text-align: center !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.leading-9 {
  line-height: 2.25rem !important;
}

.text-24 {
  font-size: 24px !important;
}

.w_Dd {
  font-weight: 400;
}

.w_Dc {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.w_h {
  background: #fff;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.0625rem 0.125rem 0.0625rem rgb(0 0 0 / 15%),
    0 -0.0625rem 0.125rem 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0.0625rem 0.125rem 0.0625rem rgb(0 0 0 / 15%),
    0 -0.0625rem 0.125rem 0 rgb(0 0 0 / 10%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.overflow-visible {
  overflow: visible !important;
}

.p-12 {
  padding: 12px !important;
}

.gap-4 {
  grid-gap: 4px !important;
  gap: 4px !important;
}

.flex-row,
.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
}

.flex-row {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.w_EL {
  width: 100%;
}

.mt-8 {
  margin-top: 8px !important;
}

.w_EM {
  margin-bottom: 0.25rem;
}

.w_HB {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #2e2f32;
  display: block;
}

.w_HD {
  color: inherit !important;
}

.w_Dt {
  font-weight: 700;
}

.w_Dq {
  color: #2e2f32;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
}

.w_EN {
  background: #fff;
  border-radius: 0.25rem;
  -webkit-box-shadow: inset 0 0 0 0.0625rem #909196;
  box-shadow: inset 0 0 0 0.0625rem #909196;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.w_ER {
  background: transparent;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #2e2f32;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  min-width: 0;
}

.w_Db {
  font-size: 1rem;
}

.mt-16 {
  margin-top: 16px !important;
}

.justify-items-start {
  justify-items: start !important;
}

.flex-col,
.flex-col-reverse {
  -webkit-box-orient: vertical !important;
}

.flex-col {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.leading-4 {
  line-height: 1rem !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.text-12 {
  font-size: 12px !important;
}

.w_Bz {
  display: inline-block;
  position: relative;
}

.p-0 {
  padding: 0 !important;
}

.ml-32 {
  margin-left: 32px !important;
}

.Button-module_small__UMN3W {
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
}

.Button-module_tertiary__WZEbY {
  background: transparent;
  color: #000;
  text-decoration: underline;
}

.Button-module_button__PM45p {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.p-24 {
  padding: 24px !important;
}

.w_EB {
  font-weight: 700;
}

.w_D8 {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

.w_D6 {
  color: #2e2f32;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.w_T {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 1rem;
  gap: 1rem;
}

.mt-16 {
  margin-top: 16px !important;
}

.Radio-module_label__Znh-K.Radio-module_checked__uiAXA {
  color: #2e2f32;
  font-weight: 700;
}

.Radio-module_label__Znh-K {
  align-items: flex-start;
  color: #515357;
  cursor: pointer;
  display: inline-flex;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  position: relative;
}

.text-gray-100 {
  color: #74767c !important;
}

.mr-32 {
  margin-right: 32px !important;
}

.w_Fu {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
  z-index: 100;
}

.w_Gs {
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0.1875rem 0.3125rem 0.125rem rgb(0 0 0 / 15%),
    0 -0.0625rem 0.1875rem 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0.1875rem 0.3125rem 0.125rem rgb(0 0 0 / 15%),
    0 -0.0625rem 0.1875rem 0 rgb(0 0 0 / 10%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-flex;
  position: relative;
}

.w_G2 {
  background: #fff;
  border-radius: 0.25rem;
  padding: 1rem;
  position: relative;
}

.p-16 {
  padding: 16px !important;
}

.ADDsuffix {
  margin-top: 6px;
}

.bottom-0 {
  bottom: 0 !important;
}

.inset-x-0 {
  right: 0 !important;
  left: 0 !important;
}

.fixed {
  position: fixed !important;
}

.bg-white {
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}

.bg-white,
.bg-yellow-180 {
  --tw-bg-opacity: 1 !important;
}

.justify-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.clickable {
  cursor: pointer;
}
</style>
